<template>
  <div>
    <!-- 轮播 -->
    <div class="swiper-box pd-20">
      <Swiper :list="swiperList"></Swiper>
    </div>
    <!-- 检索输入 -->
    <div class="flex flex-jc flex-ac">
      <el-input class="mr-10 w-200" placeholder="请输入菜品名称" v-model="search.name"></el-input>
      <el-button type="primary" @click="searchClick">搜索</el-button>
    </div>
    <!-- 检索结果 -->
    <div class="pd-20 c-f">
      <h1 class="search-title pd-10 list-box_sty">
        美食类别
      </h1>
      <div class="list-box">
        <div class="item-box  flex flex-sb mt-10 " v-for="item in search.list" :key="item.img">
          <div class="item-img">
            <el-image style="width: 100%; height: 100%" :src="item.img" fit="fill"></el-image>
          </div>
          <div class="item-detail flex-1 flex flex-dc flex-sb pd-10 list-box_sty">
            <div class="flex">
              <span>{{ item.type }}介绍：</span>
              <span>{{ item.introduce }}</span>
            </div>
            <div class="flex">
              <span>口味偏向：</span>
              <span>{{ item.taste }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import chuan from '@/assets/img/chuan.jpg';
import yue from '@/assets/img/yue.jpg';
import Swiper from '@/components/swiper.vue';
export default {
  name: 'AfunctionOne',
  components:{Swiper},
  data() {
    return {
      swiperList: [chuan, yue],
      search: {
        name: '',
        list: [
          {
            img: chuan,
            type: '川菜',
            introduce: '爱神的箭安达就开始金阿奎睡你的觉看书肯德基那是科技的你就看看到那时间看到',
            taste: '很辣'
          },
          {
            img: yue,
            type: '鲁菜',
            introduce: '爱神的箭安达就开始金阿奎睡你的觉看书肯德基那是科技的你就看看到那时间看到',
            taste: '很辣'
          }
        ]
      }
    }
  },
  methods: {
    searchClick() {
      console.log(this.search.name)
    }
  }
}
</script>
  
<style scoped>

.w-200 {
  width: 200px;
}

.search-title {
  text-align: center;
  font-size: 25px;
}

.list-box_sty {
  background: #BBEAD5;
  border: 1px solid #446DA9;
  border-radius: 8px;
}

.item-img {
  width: 280px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 30px;
}
</style>
  